<template>
  <div>
    <div>
      <van-card
          v-for="(item, index) in myCartList"
          :key="index"
          :price="item.price"
          :title="item.goodsname"
          :thumb="'http://localhost:3000' + item.img"
        >
        <template #footer>
          <van-button size="mini">按钮</van-button>
        </template>
        </van-card>
    </div>
    <!-- 如果购物车中没有数据，才会显示这个组件 -->
    <van-empty v-if="this.$store.state.mCartInfo.length === 0" image="search" description="购物车竟然是空的？？！！" />
  </div>
</template>

<script>
import {cartList} from '../api'
export default {
  data() {
    return {
      myCartList: []
    }
  },
  created() {
    // 进入页面，自动发请求获取购物车列表
    this.getCartList();
  },
  methods:{
    async getCartList() {
      let res = await cartList({'uid': this.$store.state.mUserInfo.uid});
      this.$store.commit('saveCartInfo', res.list || []);
      if(res.code === 200) {
        this.$toast('提示文案');
      }
    }
  }
}
</script>

<style>

</style>